<template> 
    <div class="shop"> 
        <shop-header></shop-header>
        <div class="tab">
            <router-link class="tab-item" to="/shop/goods" replace>点餐</router-link>
            <router-link class="tab-item" to="/shop/rating" replace>评价</router-link>
            <router-link class="tab-item" to="/shop/info" replace>商家</router-link>
        </div> 
        <keep-alive> 
            <router-view /> 
        </keep-alive>
    </div>
</template> 

<script> 
import ShopHeader from '../../components/ShopHeader.vue'
export default {
    components:{
        ShopHeader
    },
    mounted() {
        this.$store.dispatch('getShopInfo')
    },
} 
</script> 

<style lang="stylus" rel="stylesheet/stylus">
@import "../../assets/stylus/mixin.styl"
    .tab
        display flex
        justify-content space-around
        height 1.8rem 
        line-height 1.8rem
        background #fff 
        bottom-border-1px(#ccc)
        .tab-item
            display block
            display flex
            justify-items center
            align-items center
            font-size 14px 
            color rgb(77, 85, 93)
            &.router-link-active 
                color #41B883 
                position relative
                &::after 
                    content '' 
                    position absolute 
                    left 50%
                    transform translateX(-50%)
                    bottom 1px 
                    width 2rem 
                    height 0.1rem  
                    background #41B883


</style>